<!--  -->
<template>
  <div class="showDataPanel">
    <el-table class="realTableView"  :data="dataList" row-key="deviceId">
      <el-table-column prop="rangeName" label="区域名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceName" label="设备名称" align="center" :render-header="renderHeader"/>
      <el-table-column prop="deviceNo" label="设备编号" align="center" :render-header="renderHeader"/>
      <el-table-column prop="dataTime" label="采集时间" align="center" :render-header="renderHeader"/>
      <el-table-column label="冷量" align="center">
        <el-table-column prop="instantaneousCooling" label="瞬时(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="accumulatedCooling" label="累计(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="consumptionCooling" label="使用量(kWh)" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column label="热量" align="center">
        <el-table-column prop="instantaneousHeat" label="瞬时(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="accumulatedHeat" label="累计(kWh)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="consumptionHeat" label="使用量(kWh)" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column label="流量" align="center">
        <el-table-column prop="instantaneousFlow" label="瞬时(m³)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="accumulatedFlow" label="累计(m³)" align="center" :render-header="renderHeader"/>
        <el-table-column prop="consumptionFlow" label="使用量(m³)" align="center" :render-header="renderHeader"/>
      </el-table-column>
      <el-table-column prop="supplyWaterTemperature" label="'供水温度℃'" align="center" :render-header="renderHeader"/>
      <el-table-column prop="returnWaterTemperature" label="'回水温度℃'" align="center" :render-header="renderHeader"/>
    </el-table>
  </div>
</template>

<script>

import {h} from "vue";

let component;
import moment from 'moment';

export default {
  watch:{
    async deviceNoList() {
      let response = await component.$asyncPost("data", {
        actionType: "realTimeData",
        deviceInfoList: component.deviceInfoList,
        type:"heatingCoolingMeter"
      });
      if(response.success){
        component.dataList = response.dataList;
      }

    }
  },
  data() {
    return {
      deviceInfoList: [],
      deviceNoList: [],
      dataList:[],
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      }
    };
  },
  methods: {
    renderHeader({column}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth + 40; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    getData(data,type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType=type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.test1 {
}
</style>